$inputHeight:34px;

*{
	box-sizing:border-box;
}

body{
	padding:0;
	margin:0;
}

.container{
	margin:auto;
	width: 80%;
}

.row{
	margin-left:-15px;
	margin-right:-15px;
}

.clearBoth{
	&:bofore{
		content:"";
		display: table;
	}

	&:after{
		content:"";
		clear: both;	
	}
}

@media(min-width: 960px){
	.form{
		width:80%;
		margin:10% auto 5%;
		padding:5%;
	}

	.form-group{
		margin-bottom: 10px;
		width: 50%;
		float: left;
		padding: 2px 6px;

		input{
			border:1px solid lightgrey;
		}

		input[type='text'],input[type='password']{
			width: 100%;
			height: $inputHeight;
			padding:0 10px;
			vertical-align: middle;
			border-radius: 4px;
		}

		input[type='checkbox']{
			padding:0;
			margin-left:0;
		}

		button{
			height: $inputHeight;
			padding:0 20px;
			border:none;
			border-radius: 4px;
		}
	}
}

@media(max-width: 960px){
	.container{
		width: 100%;
	}

	.form{
		width:100%;
		margin:10% auto 5%;
		padding:5%;
	}

	.form-group{
		margin-bottom: 10px;

		input{
			border:1px solid lightgrey;
		}

		input[type='text'],input[type='password']{
			width: 100%;
			height: $inputHeight;
			padding:0 10px;
			vertical-align: middle;
			border:none;
			border-bottom: 1px solid lightgrey;
		}

		input[type='text']:focus,input[type='password']:focus{
			outline:none;
		}

		input[type='checkbox']{
			padding:0;
			margin-left:0;
			vertical-align: middle;
		}

		button{
			height: $inputHeight;
			padding:0 20px;
			border:none;
			border-radius: 4px;
			width: 100%;
			background-color: #5855D6;
		}

		a{
			vertical-align: middle;
		}
	}
}